<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp" %>
<link rel="stylesheet" type="text/css" href="css/cartPage.css">
<body>
<div class="header">
    <h1 id="myh1">欢迎光临宠物商店!</h1>
</div>

<div class="topnav">
    <!--跳转到目录下的网页。网页大体是一样的，只是展示的商品不一样-->
    <a href="welcome" target="_self">首页</a>
    <a href="category?categoryId=cat" id="cat" target="_self">猫猫</a>
    <a href="category?categoryId=dog" id="dog" target="_self">修勾</a>
    <a href="category?categoryId=bird" id=bird target="_self">鸽子</a>
    <a href="category?categoryId=pokemon" id="pokemon" target="_self">宝可梦</a>
    <a href="category?categoryId=bugCat" id="bugCat" target="_self">猫猫虫</a>
    <!--搜索框-->
    <form action="Search" method="post">
        <div class="searchDiv" id="searchDiv">
            <input type="text" name="searchName" placeholder="请输入想搜索的商品"
                   style="float: left;outline: none;border-style:none; height: 43px;" id="searchName">
            <input type="submit" name="submitSearch" id="#" value="搜索"
                   class="searchBtn">
            <!--自动补全-->
            <div id="autoComplete" class="searchComp">
                <li id="autoCompleteLi">
                </li>
            </div>
        </div>
    </form>
    <!--搜索框-->
    <c:if test="${sessionScope.username != null}">
        <a href="space" style="float: right;" target="_self">个人中心</a>
    </c:if>
    <c:if test="${sessionScope.username == null}">
        <a href="login" style="float: right;" target="_self">欢迎登录</a>
    </c:if>
    <a href="#" style="float: right;" class="currentSelect" target="_self">购物车</a>
</div>

<div class="mainColumn">
    <c:if test="${sessionScope.username == null}">
    <div>
        <h1 style="text-align: center;"><a href="login" onMouseOver="this.style.color='#70B6BF'"
                                           onMouseOut="this.style.color='black'" style="font-size: 100px;"
                                           target="_self">点击去登录</a></h1>
    </div>
    </c:if>
    <c:if test="${sessionScope.username != null}">

    <c:if test="${sessionScope.cartItemList.size() == 0}">
    <div>
        <h1 style="text-align: center;"><a href="welcome" onMouseOver="this.style.color='#70B6BF'"
                                           onMouseOut="this.style.color='black'" style="font-size: 100px;"
                                           target="_self">您的购物车空空如也，快去购物吧</a></h1>
    </div>
    </c:if>

    <c:if test="${sessionScope.cartItemList.size() != 0}">
    <div class="mainColumnm">
        <div class="wrap clearfix">
            <form action="order">
                <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
                    <!-- 首行 -->
                    <tr class="title">
                        <td width="50"><input type="checkbox" checked="checked" name="" class="choose_all"></td>
                        <td width="100" class=""><span style="margin-left: -10px;">全选</span></td>
                        <td width="400">商品信息</td>
                        <td width="150">单价（元）</td>
                        <td width="150">数量</td>
                        <td width="150">金额（元）</td>
                        <td width="80">操作</td>
                    </tr>


                    <!-- 商品具体信息 -->

                    <c:forEach var="cartItem" items="${sessionScope.cartItemList}">
                        <tr class="row" id = "row${cartItem.item.itemId}">
                            <td><input type="checkbox" name="${cartItem.item.itemId}" checked="checked"
                                       id="${cartItem.item.itemId}" class="choose"></td>
                            <td class="tal">
                                <a href="Item?productId=${cartItem.item.productId}&categoryId=${cartItem.item.categoryId}"
                                   class="pic">
                                    <img width="50" height="50" style="border-radius: 5px"
                                         src="${cartItem.item.description}"
                                         alt="${cartItem.item.name}">
                                </a>
                            </td>
                            <td class="tal"><a
                                    href="Item?productId=${cartItem.item.productId}&categoryId=${cartItem.item.categoryId}">${cartItem.item.name}</a>
                            </td>
                            <td>
                                <span class="tdl">${cartItem.price}</span>
                                <br>
                                <b id = "price${cartItem.item.itemId}" class="unit">${cartItem.price}</b>
                            </td>
                            <td>
                                <div class="amount">
                                    <a href="#" id = "${cartItem.item.itemId}" class="Increase">+</a>
                                    <form name="quantityFrm" action="cartEdit">
                                        <input type="text" id="ip${cartItem.item.itemId}" name="quantity" class="unum" readonly="readonly"
                                               value=${cartItem.quantity}>
                                    </form>
                                    <a href="#" id = "${cartItem.item.itemId}" class="Reduce">-</a>
                                </div>
                            </td>
                            <td><b id = "up${cartItem.item.itemId}" class="u-price"></b></td>
                            <td><a href="#" id="del${cartItem.item.itemId}" class="btn-del">删除</a>
                            </td>
                        </tr>
                    </c:forEach>


                    <tr class="count">
                        <td colspan="7">
                            <div class="jiesuan clearfix">
                                <div class="left fl">
                                    <p><input type="checkbox" checked="checked" name="" class="choose_all"> 全选&nbsp;&nbsp;&nbsp;<a
                                            href="#" class="del_check">删除选中商品</a></p>
                                </div>
                                <div class="right fr clearfix">

                                    <p>已选商品<span class="red t-number"> 0 </span>件 总价(不含运费、税费)：<span
                                            class="red t-price">￥0.00</span>
                                    </p>
                                    <!-- <div><a href="#" class="btn pay">结算</a></div> -->
                                    <input value="结算" type="submit" id="payfr"
                                           class="btn pay fr"/>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    </c:if>
    </c:if>
    <!-- 引入JS文件 -->

    <%@include file="../common/bottom.jsp" %>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="javascripts/autoComplete.js"></script>
        <script src = "javascripts/cart.js"></script>